import { Form, Input, Button, Checkbox, Modal } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import md5 from 'blueimp-md5';
import { login } from '../../api/person';
import action from '../../store/action/index';
import '../../static/css/person.less';


class Login extends React.Component {
    constructor(props, context) {
        super(props, context);
    }

    loginFail() {
        const modal = Modal.error({
            title: 'Login failed',
            content: 'Please try again!',
        });
        setTimeout(() => modal.destroy(), 2000);
    }

    onFinish = async values => {
        let { userName, userPass } = values;
        // userPass = md5(userPass);
        let result = await login({
            name: userName,
            password: userPass
        });
        if (parseFloat(result.code) === 0) {
            this.props.queryBaseInfo();
            this.props.login();
            this.props.history.go(-1);
            return;
        }
        this.loginFail();
    };

    render() {
        return (
            <Form
                name="normal_login"
                className="login-form"
                initialValues={{
                    remember: true,
                }}
                onFinish={this.onFinish}
            >
                <Form.Item
                    name="userName"
                    rules={[
                        {
                            required: true,
                            message: 'Please input your Username!',
                        },
                    ]}
                >
                    <Input prefix={<UserOutlined className="site-form-item-icon icon" />} placeholder="Username" />
                </Form.Item>
                <Form.Item
                    name="userPass"
                    rules={[
                        {
                            required: true,
                            message: 'Please input your Password!',
                        },
                    ]}
                >
                    <Input
                        prefix={<LockOutlined className="site-form-item-icon icon" />}
                        type="password"
                        placeholder="Password"
                    />
                </Form.Item>
                <Form.Item>
                    <Form.Item name="remember" valuePropName="checked" noStyle>
                        <Checkbox>Remember me</Checkbox>
                    </Form.Item>
                    <a className="login-form-forgot" href="">
                        Forgot password
            </a>
                </Form.Item>

                <Form.Item>
                    <Button type="primary" htmlType="submit" className="login-form-button">
                        Log in
            </Button>
                </Form.Item>
            </Form>
        );
    }
}

export default connect(null, { ...action.person, ...action.person })(Login);